<!--  -->
<template>
    <el-dialog v-model="isShowEditForm" title="分配角色" :before-close="closeEditForm">
        <el-form :model="curEditFormData">
            <el-form-item label="账号">
                <el-input v-model="curEditFormData.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="curEditFormData.nickName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeEditForm">取消</el-button>
                <el-button type="primary">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { reactive, toRefs, Ref, ref, withDefaults, watch } from 'vue'
let props = withDefaults(defineProps<{ isShowEditForm: boolean, curEditAdminData: IGetAdminListListItem }>(), {
    isShowEditForm: false
})
const emit = defineEmits<{ (event: 'closeEditForm'): void }>();
let form = reactive({
    name: ""
})
// 点击取消关闭编辑弹框
function closeEditForm() {
    emit('closeEditForm')
}
// 从父组件传递过来的curEditAdminData是一个对象(引用类型数据) 如果在这里直接对这个对象的值进行修改，那么父组件的数据也会改变,但是我们是不能这样直接在子组件修改父组件的数据的

// 父组件渲染完毕的时候，给这个子组件传递的值curEditAdminData还没有传递，点击的时候才会传递，但是子组件已经渲染了，也就是setup已经执行过了，因此curEditAdminData的值是空的，所以要用watch来监听，并且每次点击不同行的编辑，都能获取的是最新的数据
let curEditFormData = ref({}) as Ref<IGetAdminListListItem>
watch(
    () => props.curEditAdminData,
    () => {
        curEditFormData.value = { ...props.curEditAdminData }//浅拷贝过来 这样就不会影响父组件的数据 props中的数据 在js中需要点出来
    }
)





</script>
<style lang='less' scoped>
</style>